<template>
  <div>
    <video ref="localVideo" autoplay></video>
    <video ref="remoteVideo" autoplay></video>
    <button @click="startCall">开始通话</button>
    <button @click="endCall">结束通话</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      localStream: null,
      remoteStream: null,
      socket: null,
      peerConnection: null,
    };
  },
  mounted() {
    this.socket = new WebSocket("ws://localhost:8090/web/"+JSON.parse(localStorage.getItem("user")).username); // 替换为后端WebSocket的地址
    this.socket.onmessage = this.handleMessage;
  },
  methods: {
    async startCall() {
      try {
        this.localStream = await navigator.mediaDevices.getUserMedia({
          video: true,
          audio: true,
        });
        this.$refs.localVideo.srcObject = this.localStream;
        this.peerConnection = new RTCPeerConnection();
        this.localStream.getTracks().forEach((track) => {
          this.peerConnection.addTrack(track, this.localStream);
        });
        this.peerConnection.ontrack = (event) => {
          this.remoteStream = event.streams[0];
          this.$refs.remoteVideo.srcObject = this.remoteStream;
        };
        const offer = await this.peerConnection.createOffer();
        await this.peerConnection.setLocalDescription(offer);
        this.socket.send(JSON.stringify({ type: "offer", data: offer }));
      } catch (error) {
        console.error("Error starting call:", error);
      }
    },
    async endCall() {
      this.localStream.getTracks().forEach((track) => {
        track.stop();
      });
      this.peerConnection.close();
      this.socket.close();
    },
    async handleMessage(event) {
      const message = JSON.parse(event.data);
      switch (message.type) {
        case "offer":
          await this.handleOffer(message.data);
          break;
        case "answer":
          await this.handleAnswer(message.data);
          break;
        case "candidate":
          await this.handleCandidate(message.data);
          break;
      }
    },
    async handleOffer(offer) {
      try {
        this.peerConnection = new RTCPeerConnection();
        this.localStream.getTracks().forEach((track) => {
          this.peerConnection.addTrack(track, this.localStream);
        });
        this.peerConnection.ontrack = (event) => {
          this.remoteStream = event.streams[0];
          this.$refs.remoteVideo.srcObject = this.remoteStream;
        };
        await this.peerConnection.setRemoteDescription(offer);
        const answer = await this.peerConnection.createAnswer();
        await this.peerConnection.setLocalDescription(answer);
        this.socket.send(JSON.stringify({ type: "answer", data: answer }));
      } catch (error) {
        console.error("Error handling offer:", error);
      }
    },
    async handleAnswer(answer) {
      try {
        await this.peerConnection.setRemoteDescription(answer);
      } catch (error) {
        console.error("Error handling answer:", error);
      }
    },
    async handleCandidate(candidate) {
      try {
        await this.peerConnection.addIceCandidate(candidate);
      } catch (error) {
        console.error("Error handling candidate:", error);
      }
    },
  },
};
</script>
